<template>
  <div class="crops">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 农作物生长参数</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="cropsFlag" class="content">
      <el-row :gutter="20" v-for="(x, i) in cropsState" :key="i" class="row">
        <el-col :span="24">
          <x-crops :info="x"></x-crops>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
import XCrops from './CropsComponent.vue' 
 
export default {
  components: {
    XCrops 
  },
  data() {
    return {
      cropsFlag: false,
      cropsState: [],
      update: null,
      // 模拟农作物数据 
      mockCropsData: [
        {
          id: "crop_001",
          species: "crops",
          name: "小麦田1号",
          temperature: "22.5℃",
          humidity: "65%",
          soilMoisture: "42%",
          growthStage: "抽穗期",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "crop_002",
          species: "crops",
          name: "玉米田1号",
          temperature: "25.3℃",
          humidity: "60%",
          soilMoisture: "38%",
          growthStage: "拔节期",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "crop_003",
          species: "crops",
          name: "水稻田1号",
          temperature: "28.1℃",
          humidity: "75%",
          soilMoisture: "55%",
          growthStage: "分蘖期",
          lastUpdate: new Date().toLocaleTimeString()
        }
      ]
    }
  },
  methods: {
    // 模拟获取农作物生长参数 
    getCropsState() {
      // 模拟API延迟 
      setTimeout(() => {
        // 随机更新一些数据以模拟实时变化 
        this.mockCropsData.forEach(crop  => {
          crop.temperature  = `${(Math.random()  * 5 + 20).toFixed(1)}℃`;
          crop.humidity  = `${(Math.random()  * 20 + 50).toFixed(0)}%`;
          crop.soilMoisture  = `${(Math.random()  * 20 + 30).toFixed(0)}%`;
          crop.lastUpdate  = new Date().toLocaleTimeString();
        });
        
        this.cropsState  = this.mockCropsData; 
        this.cropsFlag  = true;
        console.log(' 农作物数据更新:', this.cropsState); 
      }, 300);
    },
    
    // 模拟定时更新数据 
    startUpdateInterval() {
      this.update  = setInterval(() => {
        console.log(' 模拟数据更新');
        this.getCropsState(); 
      }, 10000);
    }
  },
  activated() {
    this.getCropsState(); 
    this.startUpdateInterval(); 
  },
  deactivated() {
    clearInterval(this.update); 
  }
}
</script>
 
<style scoped>
  .row {
    margin-bottom: 10px;
  }
</style>